<script>
import zfb from '@/assets/zfb.png'
export default {
  data () {
    // 用来定义地图用的变量
    this.map = null;

    return {

    }
  },
  methods: {
    search (event) {
      console.log('可以查询了', event.target.value);


      // 检索功能，返回数据
      var options = {
        onSearchComplete: function (results) {
          // 判断状态是否正确
          if (local.getStatus() == BMAP_STATUS_SUCCESS) {
            var s = [];
            for (var i = 0; i < results.getCurrentNumPois(); i++) {
              s.push(results.getPoi(i).title + ", " + results.getPoi(i).address);
            }
            document.getElementById("r-result").innerHTML = s.join("<br/>");
          }
        }
      };
      var local = new BMapGL.LocalSearch(this.map, options);
      local.search(event.target.value)

    }
  },
  mounted () {
    this.map = new BMapGL.Map("container");
    var point = new BMapGL.Point(120.27079, 30.31162);
    // 设置地图级别
    this.map.centerAndZoom(point, 18);

    this.map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    // map.setHeading(64.5);   //设置地图旋转角度
    // map.setTilt(73);       //设置地图的倾斜角度
    /*
      1.标准地图：BMAP_NORMAL_MAP
      2.地球模式：BMAP_EARTH_MAP
      3.普通卫星地图：BMAP_SATELLITE_MAP
    */
    this.map.setMapType(BMAP_NORMAL_MAP);      // 设置地图类型为地球模式

    var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
    this.map.addControl(scaleCtrl);
    var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
    this.map.addControl(zoomCtrl);
    // 可以修改地图控件的位置
    var cityCtrl = new BMapGL.CityListControl({ anchor: BMAP_ANCHOR_TOP_RIGHT });  // 添加城市列表控件
    this.map.addControl(cityCtrl);

    // 移除控件
    // map.removeControl(new BMapGL.ScaleControl(opts));

    // 自定义个性化地图
    // map.setMapStyleV2({
    //   styleId: '518d90412a749d06bb11b54cf6061ff4'
    // });


    // var marker = new BMapGL.Marker(point);        // 创建标注
    // map.addOverlay(marker);                     // 将标注添加到地图中


    var myIcon = new BMapGL.Icon(zfb, new BMapGL.Size(23, 25), {
      // 指定定位位置。
      // 当标注显示在地图上时，其所指向的地理位置距离图标左上
      // 角各偏移10像素和25像素。您可以看到在本例中该位置即是
      // 图标中央下端的尖角位置。
      anchor: new BMapGL.Size(10, 25),
      // 设置图片偏移。
      // 当您需要从一幅较大的图片中截取某部分作为标注图标时，您
      // 需要指定大图的偏移位置，此做法与css sprites技术类似。
      imageOffset: new BMapGL.Size(0, 0 - 25)   // 设置图片偏移
    });
    // 创建标注对象并添加到地图
    var marker = new BMapGL.Marker(point, { icon: myIcon });
    this.map.addOverlay(marker);

    marker.addEventListener("click", function () {
      alert("您点击了标注");
    });

    const _this = this

    // 地图定位，浏览器定位
    var geolocation = new BMapGL.Geolocation();
    geolocation.getCurrentPosition(function (r) {
      // console.log(r);
      if (this.getStatus() == BMAP_STATUS_SUCCESS) {
        var mk = new BMapGL.Marker(r.point);
        _this.map.addOverlay(mk);
        _this.map.panTo(r.point);
        alert('您的位置：' + r.point.lng + ',' + r.point.lat);
      }
      else {
        alert('failed' + this.getStatus());
      }
    });


    // 检索功能，搜索功能
    // var circle = new BMapGL.Circle(point, 1000, { fillColor: "blue", strokeWeight: 1, fillOpacity: 0.3, strokeOpacity: 0.3 });
    // map.addOverlay(circle);
    // var local = new BMapGL.LocalSearch(map, { renderOptions: { map: map, autoViewport: false } });
    // local.searchNearby('厕所', point, 1000);



  },
}
</script>
<template>
  <div>
    <p>百度地图 <input type="text" placeholder="请输入搜索关键字" @keyup.enter="search" /> </p>

    <div id="container"></div>
    <div id="r-result"></div>
  </div>
</template>
<style scoped lang="scss">
#container {
  height: 400px;
}
</style>
